<template>
    <el-tree
        ref="menuTree"
        :data="menuList"
        show-checkbox="true"
        highlight-current="true"
        node-key="id"
        default-expand-all
        :props="defaultProps"
        @node-click=""
    ></el-tree>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted } from 'vue'
import { ElTree } from 'element-plus'
import type { IMenu } from '@/utils/types'
import { RequestMenu } from '@/api/index'
const menuList = ref<Array<Tree>>([])
const selectMenuList = ref<Array<Tree>>([])
const menuTree = ref()
interface Tree {
    id: number
    label: string
    children?: Tree[]
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
onMounted(() => {
    getMenuList()
})

const testData = [
    {
        id: 1,
        label: '系统管理',
        iconCls: 'el-icon-setting',
        path: '/main_sys',
        meta: {
            title: '系统管理',
            requireAuth: true,
        },
        children: [
            {
                id: 4,
                label: '菜单管理',
                iconCls: 'el-icon-menu',
                path: '/sys/menu',
                meta: {
                    title: '菜单管理',
                    requireAuth: false,
                },
            },
            {
                id: 2,
                label: '角色管理',
                iconCls: 'el-icon-setting',
                path: '/sys/role',
                meta: {
                    title: '角色管理',
                    requireAuth: false,
                },
            },
            {
                id: 3,
                label: '用户管理',
                iconCls: 'el-icon-user',
                path: '/sys/user',
                meta: {
                    title: '用户管理',
                    requireAuth: false,
                },
            },
        ],
    },
]

const getMenuList = async () => {
    const rootRoleId = 1 //超级管理员roleId:1,返回所有菜单数据
    const data = await RequestMenu(rootRoleId)
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        menuList.value = resultInfo

        setSelectorMenuList()
    }
}

const setSelectorMenuList = () => {
    console.log('menuTree.value ', menuTree.value)
    setTimeout(() => {
        selectMenuList.value = testData
        menuTree.value.setCheckedNodes(testData)
    }, 1000)

    // RequestMenu(3).then(data => {
    // 	let { resultCode, resultInfo } = data
    // 	if (resultCode == 1) {
    // 		selectMenuList.value = resultInfo
    //         menuTree.value.setCheckedNodes(resultInfo)
    // 	}
    // })
}

const data: Tree[] = [
    {
        id: 1,
        label: '系统设置',
        children: [
            {
                id: 4,
                label: '菜单管理',
            },
        ],
    },
    {
        id: 2,
        label: '商城系统',
        children: [
            {
                id: 5,
                label: '商品管理',
            },
            {
                id: 6,
                label: '分类管理',
            },
        ],
    },
]
</script>

<style scoped></style>
